<style>
.webuploader-container {
  position: relative;
}
.webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #fff;
  padding: 5px 10px;
  color: #333;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.webuploader-pick-hover {
  background: #e6e6e6;
  border-color: #adadad;
}

.webuploader-pick-disable {
  opacity: 0.6;
  pointer-events:none;
}

.balloon-uploader {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.balloon-uploader-heading {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  display: none;
}

.balloon-uploader-footer {
  background-color: #f5f5f5;
  color: #333;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  text-align: right;
}

.balloon-filelist {
  width: 100%;
}

.balloon-filelist-heading {
  padding: 8px 10px;
  font-weight: bold;
  border-bottom: 2px solid #ddd;
}

.balloon-uploader-body {
  position: relative;
}

.balloon-filelist .file-name,
.balloon-filelist .file-size,
.balloon-filelist .file-status,
.balloon-filelist .file-manage {
  position: relative;
  z-index: 1;
}

.balloon-filelist .file-name {
  display: inline-block;
  width: 40%;
}

.balloon-filelist .file-size {
  display: inline-block;
  width: 20%;
}

.balloon-filelist .file-status {
  display: inline-block;
  width: 18%;
}
.balloon-filelist .file-manage {
  display: inline-block;
  width: 20%;
  z-index: 9999;
  position: absolute;
}

.balloon-filelist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 100px;
  max-height: 300px;
  overflow-y: scroll;
}

.balloon-filelist ul li {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 8px 10px;
}

.balloon-dnd {
  visibility: hidden;
}

.balloon-uploader-none .balloon-uploader-footer,
.balloon-uploader-none .balloon-uploader-body {
  visibility: hidden;
}

.balloon-uploader-none .balloon-dnd {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  vertical-align: middle;
}

.balloon-nofile {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 100px;
  text-align: center;
  color: #999;
}

.balloon-uploader .file-pick-btn {
  display: inline-block;
}

.balloon-uploader .start-upload-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #5bc0de;
  padding: 5px 10px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #46b8da;
  overflow: hidden;
}

.balloon-uploader .start-upload-btn:hover {
  background: #31b0d5;
  border-color: #269abc;
}

.balloon-filelist .file-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.balloon-filelist .file-progress-bar {
  background: rgb(219,242,215);
  background: rgba(59, 181, 33, 0.18);
  float: left;
  height: 100%;
}

</style>

{% set showCourseMaterialPane = showCourseMaterialPane|default(1) %}
{% set showLinkPane = showLinkPane|default(1) %}

<div class="file-chooser">
  <div class="file-chooser-bar" style="display:none;">
    <span data-role="placeholder"></span>
    <button class="btn btn-link btn-sm" type="button" data-role="trigger"><i class="glyphicon glyphicon-edit"></i> {{'重新选择'|trans}}</button>
  </div>

  <div class="file-chooser-main">
    <ul class="nav nav-pills nav-pills-sm mbs file-chooser-tabs">
      <li><a class="file-chooser-uploader-tab" href="#file-chooser-upload-pane" data-toggle="tab">{{'上传文件'|trans}}</a></li>
      <li><a href="#file-chooser-browser-pane" data-toggle="tab">{{'从资料库中选择'|trans}}</a></li>
      {% if showCourseMaterialPane %}
        <li><a href="#file-chooser-course-pane" data-toggle="tab">{{'从课程文件中选择'|trans}}</a></li>
      {% endif %}
      {% if showLinkPane %}
        <li><a class="file-chooser-link-tab" href="#file-chooser-link-pane" data-toggle="tab">{{'网络链接'|trans}}</a></li>
      {% endif %}
    </ul>
    <div class="tab-content">
      <div class="tab-pane" id="file-chooser-upload-pane">
        {% set token = uploader_token('coursematerial', course.id, 'private') %}
        <div class="balloon-uploader" id="batch-uploader"
          data-init-url="{{ path('uploader_init', {token:token}) }}"
          data-finish-url="{{ path('uploader_finished', {token:token}) }}"
          data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
          data-accept="{{ uploader_accept(targetType)|json_encode }}"
          data-process="{{ uploader_process(targetType) }}"
        >
          <div class="balloon-uploader-heading">上传文件</div>
          <div class="balloon-uploader-body">
            <div class="balloon-nofile">请将文件拖到这里，或点击添加文件按钮</div>
            <div class="balloon-filelist">
              <div class="balloon-filelist-heading">
                <div class="file-name">文件名</div>
                <div class="file-size">大小</div>
                <div class="file-status">状态</div>
              </div>
              <ul>
              </ul>
            </div>
          </div>
          <div class="balloon-uploader-footer">
            <div class="file-pick-btn"><i class="glyphicon glyphicon-plus"></i> 添加文件</div>
            <div class="start-upload-btn"><i class="glyphicon glyphicon-upload"></i> 开始上传</div>
          </div>
        </div>
      </div>
      
      <div class="tab-pane" id="file-chooser-browser-pane">
        <div id="file-browser" data-role="file-browser"
          data-base-url="{{ path('uploadfile_browser') }}"
          data-default-url="{{ path('uploadfile_browser', {source:'upload'}) }}"
          data-my-sharing-contacts-url="{{ path('material_lib_my_sharing_contacts') }}"
         data-empty="{{'暂无文件，请先上传。'|trans}}">
          <div class="file-browser-list-container"></div>
        </div>
      </div>

      <div class="tab-pane" id="file-chooser-course-pane">
          <div id="file-browser" data-role="course-file-browser"
            data-url="{{ path('course_manage_material_browser', {courseId:targetId}) }}"
            data-empty="{{'暂无文件，请先上传。'|trans}}">
          </div>
      </div>

      <div class="tab-pane" id="file-chooser-link-pane">

        <div class="form-group" style="margin-bottom:0px;">
          <div class="col-md-12 controls">
            <input type="text" class="form-control" name="link" placeholder="{{'资料链接地址'|trans}}">
            <div class="help-block"></div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
